import { createRouter, createWebHistory } from 'vue-router';
import type { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    // 这是首页，当你启动项目时，看到的就是这个页面
    path: '/',
    name: 'homePage',
    component: () => import('@/views/homePage/HomePage.vue'),
    meta: {
      title: '首页'
    }
  },
  {
    path: '/templatePage',
    name: 'templatePage',
    redirect: '/templatePage/basicPage',
    meta: {
      title: '模板页面'
    },
    children: [
      {
        // 注意：该页面需要将环境变量中的VITE_USE_MOCK设为true才能正常工作，这是一个早期开发的的增删改查的页面模板
        path: '/templatePage/basicPage',
        name: 'basicPage',
        component: () => import('@/views/templatePage/BasicPage/BasicPage.vue'),
        meta: {
          title: '基础查询页面模板',
          isHide: true // 是否在菜单栏中隐藏
        }
      },
      {
        /**
         * 该页面是标准化项目最核心的页面。
         * 这是一个静态的标准查询页面模板，不需要mock数据。之后在开发类似页面时，可以先复制粘贴这个页面的代码
         * 注意：这个页面的布局和样式是基于element-plus的，如果你的项目使用的是其他UI框架，可能需要做一些调整
         * 这个页面中几乎不存在自定义封装的组件，这么设计是为了方便开发者在开发时可以直接修改代码，而不需要去理解和修改封装的组件
         * 从而适应产品不断变化的需求，尽可能避免“船大难掉头”，难以满足特殊需求的困境。
         * 它在设计的时候，就被设计为“即贴即用”的类型。
         * 这意味着在将这个页面的代码复制到一个新的页面时，这个页面的编码保证新页面代码是可以正常工作的。
         * 但需要注意的是，这个页面包含一个变量localForageKey，这个值用来保证页面的基本设置功能
         * （即查询区条件和列表列字段是否显示，以及它们之间的顺序）正常工作。
         * localForageKey使得页面单独获得了一块独立的浏览器缓存，从而用于保存用户设置。
         * 在开发最常规的增删改查页面时，你不需要去管这个值。
         * 但在开发这种页面：即顶部有tab组件，通过切换状态从而切换tab组件下的子页面。
         * 你需要保证每个子页面都具有唯一的localForageKey值，其它任何情况都是如此。
         * 简而言之，每个页面的localForageKey都要保证是唯一的。
         */
        path: '/templatePage/standardPage',
        name: 'standardPage',
        component: () => import('@/views/templatePage/StandardPage/StandardPage.vue'),
        meta: {
          title: '标准查询页面模板'
        }
      }
    ]
  },
  {
    path: '/examplePage',
    name: 'examplePage',
    redirect: '/examplePage/standardPage',
    meta: {
      title: '示例页面'
    },
    children: [
      {
        // 注意：该页面需要将环境变量中的VITE_USE_MOCK设为true才能正常工作，它利用mock模拟了整个增删改查逻辑
        path: '/examplePage/basicPage',
        name: 'exampleBasicPage',
        component: () => import('@/views/examplePage/BasicPage/BasicPage.vue'),
        meta: {
          title: '基础查询页面',
          isHide: true // 是否在菜单栏中隐藏
        }
      },
      {
        path: '/examplePage/standardPageWithTab',
        name: 'exampleStandardPageWithTab',
        component: () => import('@/views/examplePage/StandardPageWithTab/StandardPageWithTab.vue'),
        meta: {
          title: '标准查询页面(带tab)'
        }
      },
      {
        // 这是一个静态的大屏数据展示页面，不需要mock数据。之后在开发类似页面时，可以参照这个页面的布局和数据展示方式
        path: '/examplePage/oneMapPage',
        name: 'examplePageOneMapPage',
        component: () => import('@/views/examplePage/OneMapPage/OneMapPage.vue'),
        meta: {
          title: '一张图页面',
          freeScreen: true
        }
      },
      /**
       * 这是一个静态的调车计划编制页面，不需要mock数据。它的特点是包含了较为复杂的拖拽逻辑。
       * 点击表头的“制动设备”按钮，将会在右侧展示一个模态框，模态框中包含了一系列可供拖拽的组件。
       * 你可以将这些组件拖拽到左侧的表格中，并且，对于铁鞋设备，拖拽到表格单元格的左边和右边，会有不同的效果。
       * 由于在编写该页面时，发现开发难度较大。因此作为记录，就将这个页面收录在此处，以供参考。
       */
      {
        path: '/examplePage/shuntingPlan',
        name: 'examplePageShuntingPlan',
        component: () => import('@/views/examplePage/ShuntingPlan/ShuntingPlan.vue'),
        meta: {
          title: '编制调车计划'
        }
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;
